{include file="header.tpl"}

<script type="text/javascript" language="javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

{literal}
<script type="text/javascript">

var rendererOptions = {
		  draggable: true
		};
		var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
		var directionsService = new google.maps.DirectionsService();
		var map;

		var bsas = new google.maps.LatLng(-36.385913,-60.736084);

		function initialize() {

		  var mapOptions = {
		    zoom: 7,
		    mapTypeId: google.maps.MapTypeId.ROADMAP,
		    center: bsas
		  };
		  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		  directionsDisplay.setMap(map);
		  //directionsDisplay.setPanel(document.getElementById('directionsPanel'));

		  google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
		    computeTotalDistance(directionsDisplay.directions);
		  });

		  calcRoute();

		}

		function calcRoute() {

		  var request = {
		    origin: $('#address1').val(),
		    destination: $('#address2').val(),
		   // waypoints:[{location: $('#address3').val()} ],
		    travelMode: google.maps.DirectionsTravelMode.DRIVING
		  };
		  directionsService.route(request, function(response, status) {
		    if (status == google.maps.DirectionsStatus.OK) {
		      directionsDisplay.setDirections(response);
		    }
		  });
		}

		function computeTotalDistance(result) {
		  var total = 0;
		  var myroute = result.routes[0];
		  for (var i = 0; i < myroute.legs.length; i++) {
		    total += myroute.legs[i].distance.value;
		  }
		  total = total / 1000.
		  $('#directionsPanel').css('display','block');
		  document.getElementById('total').innerHTML = total + ' km';
		  costo =  total * parseFloat($('#combustible').val() *  $('#consumo').val() * 0.01) + parseFloat($('#peajes').val());
		  document.getElementById('gastos').innerHTML = '$'+ costo;
		}

		google.maps.event.addDomListener(window, 'load', initialize);
</script>
{/literal}
	
<div id="col1">
	<div id="form" class="calcularForm" >
		<table align="center" valign="center">
			<tr>
				<td colspan="2" align="left"><b>Calcular distancia:</b></td>
			</tr>
			<tr>
				<td>Ciudad Origen:</td>
				<td><input type="text" name="address1" id="address1" size="25"/></td>
			</tr>
			<tr>
				<td>Ciudad Destino:</td>
				<td><input type="text" name="address2" id="address2" size="25"/></td>
			</tr>

			<tr>
				<td>Valor del combustible:</td>
				<td><input type="text" name="combustible" id="combustible" value="7.99"  size="5"/></td>
			</tr>
			<tr>
				<td>Consumo (Cada 100Km):</td>
				<td><input type="text" name="consumo" id="consumo" value="12" size="5"/></td>
			</tr>
			<tr>
				<td>Costo de Peajes:</td>
				<td><input type="text" name="peajes" id="peajes" value="0" size="5"/></td>
			</tr>
			<tr>
				<td colspan="2" align="right"><input type="button" value="Calcular" onclick="initialize();"/></td>
			</tr>
		</table>
	</div>
	<center><div style="width:100%; height:10%" id="distance_direct"></div></center>
	<center><div style="width:100%; height:10%" id="distance_road"></div></center>
	<br>
	 <div id="directionsPanel" class="calcularResultadoForm" >
	    <p><b>Distancia:</b> <span id="total"></span></p>
	    <p><b>Gastos:</b> <span id="gastos"></span></p>
    </div>
    <br>
	<div id="map-canvas" style="width:600px; height:400px;border: 1px solid #AAAAAA;"></div>
   
</div>


{include file="rightPanel.tpl"}
{include file="footer.tpl"}